<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    /*
    Animation 
      - animation-name: 时间曲线 （定义的 @keyframes）
      - animation-duration： 动画时长
      - animation-timing-function：动画的时间曲线 可以使用 transition 来代替 timing-function 使得每个关键帧的 timing-function 都不一样
      - animation-delay： 动画开始前的延迟
      - animation-iteration-count：动画播放的次数
      - animation-direction：动画的方向

      @keyframes mykf { // 可以使用 from to 也可以使用百分比
        0% {top:0;transition:top ease}
        50% {top:30px; transition:top ease-in}
        75% {top: 10px;transition:top ease-out}
        100% {top:0;transition: top linear}
      }
    Transition 
      - transition-property：要变换的属性
      - transition-duration：变换的时长
      - transition-timing-function： 时间曲线 https:cubic-bezier.com 
        ease: 缓冲曲线   ease-in（退出动画） ease-out（出现的动画） 缓动曲线
      - transition-delay：延迟
    */
  </script>
  <style>
    @keyframes myKeyFrames {
      from {background-color: pink;}
      to{background-color: yellowgreen;}
    }
    div {
      height: 100px;
      width: 100px;
      animation: myKeyFrames 5s infinite;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>
